<template>
  <div class="module-container">
    <ModuleHeader
      title="债市资金"
    />

    <div class="charts-grid">
      <!-- 左侧图表：M2与A股总市价比率 -->
      <BondFundChart
        :series="[bondFundData?.m2ToMarketRatio]"
        :height="300"
        :y-axis-range="[100, 170]"
      />

      <!-- 右侧图表：CFETS指数 -->
      <BondFundChart
        :series="bondFundData?.cfetsIndices"
        :height="300"
        :y-axis-range="[100, 170]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBondFundData } from '../hooks/useBondFundData'
import BondFundChart from './BondFundChart.vue'
import ModuleHeader from '../common/ModuleHeader.vue'

const { bondFundData } = useBondFundData()
</script>

<style scoped>
.module-container {
  @apply bg-white rounded-[4px] shadow-sm mb-6 overflow-hidden;
  border: 1px solid #D4D8E5;
}

.charts-grid {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-6 p-6;
}
</style>
